<template>
  <div style="height:100%;width:100%;background:#EEF0F5 !important;">
    <!-- 数据监控  -->
    <div class="data-container" style="background:#eef0f5">
      <!--  上布局  -->
      <!-- 左侧布局 -->
      <div class="data-left">
        <!--  任务执行情况  -->
        <div class="data-top">
          <!--    标题    -->
          <data-title text="研判事件统计" @selectTablist="handleCheckWork"/>
          <!--    内容    -->
          <div>
            <!--         <h4 style="margin:0;padding:0 20px">使用场景</h4>-->
            <div class="data-details">
              <detail v-for="(item, index) in details1" :data="item" :key="index" :id="index"></detail>
            </div>
          </div>
          <div>
            <!--          <p style="margin:0;padding:0 20px">获取内容</p>-->
            <div class="data-details">
              <detail v-for="(item, index) in details2" :data="item" :key="index" :id="4"></detail>
            </div>
          </div>
          <div>
          </div>
        </div>
      </div>
      <!-- 右侧布局 -->
      <div class="data-right">
        <!-- 日志数据接入情况 -->
        <div class="data-top">
          <!--    标题    -->
          <dataTitle text="用户刻画统计" @selectTablist="handleCheckLog"/>
          <div class="data-details" style="align-items: flex-start">
            <div class="data-detail-box" v-for="(item,index) in logs" :key="index">
              <!--     接入数据统计       -->
              <div class="data-detail-left">
                <div class="data-detail-img">
                  <img v-show="index==0" src="@/assets/images/sjyp_yhkh_01.png" alt="">
                  <img v-show="index==1" src="@/assets/images/sjyp_yhkh_02.png" alt="">
                  <img v-show="index==2" src="@/assets/images/sjyp_yhkh_03.png" alt="">
                </div>
                <div class="data-detail-title">
                  {{ item.title }}
                </div>
              </div>
              <div class="data-detail-right">
                <span class="countRow fontcolor-blue" style="font-size:24px;">{{ item.value }}</span>
                <span class="unit">{{ item.tip }}</span>
              </div>

            </div>
            <div class="data-count">
              <div class="data-title">
                <!--              <h3>责任终端</h3>-->
                <!--              <div class="data-tabs">
                                <el-radio-group v-model="importData">
                                  <el-radio :label="1">责任终端</el-radio>
                                  <el-radio :label="2">责任红盘</el-radio>
                                </el-radio-group>
                              </div>-->
              </div>
              <div class="box module-top">
                <state style="flex: 1" :Data="sData"  v-if="importData==1">
                  <template #base>
                    <p style="margin:0;">IP : {{ sData.IP }}</p>
                    <p style="margin:0;">密级 : {{ sData.level }}</p>
                    <p style="margin:0;">物理位置 ： {{ sData.position }}</p>
                  </template>
                </state>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  安全事件趋势  -->
    <div class="data-bottom">
      <dataTitle text="安全事件趋势" @selectTablist="handleCheckWeb"/>
      <line-chart height="80%" :cdata="lineData"></line-chart>
    </div>
  </div>
</template>

<script>
import detail from './component/detail'
import PieChart from './component/PieChart'
import LineChart from './component/LineChart'
import DataTitle from './component/DataTitle'
import importTop from './component/importTop5'
import Duty from '@/views/judge/component/Duty'
import State from '@/views/judge/component/State'

export default {
  name: 'dataMonitoring',
  components: { detail, PieChart, DataTitle,importTop,LineChart,Duty ,State},
  data() {
    return {
      sData: {
        IP: "10.11.1.120",
        level: "机密",
        position: "财富大厦3楼",
        label: ["窃", "密", "涉"],
        showEnter: true,
      },
      sData2:{
        ID:'13245',
        state:'在用',
        time:'2022/7/26 15:00:34'
      },
      tabs: [
        {
          title: '近一日'
        },
        {
          title: '近一周'
        },
        {
          title: '近一月'
        },
        {
          title: '自定义'
        }
      ],
      time: '',
      isActive: 0,
      // 使用场景
      details1: [
        {
          title: '违规事件',
          value: 7,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_01.png'
        },
        {
          title: '攻击事件',
          value: 5,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_02.png'
        },
        {
          title: '异常事件',
          value: 2,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_03.png'
        }
      ],
      // 获取内容
      details2: [
        {
          title: '网络事件',
          value: 2,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_04.png'
        },
        {
          title: '应用事件',
          value: 2,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_05.png'
        },
        {
          title: '终端事件',
          value: 1,
          color: '#466AEF',
          tip: '',
          img:'sjypcz_06.png'
        }
      ],
      logs: [
        {
          title: '高危',
          value: 2,
          tip: '个'
        }, {
          title: '中危',
          value: 4,
          tip: '个'
        }, {
          title: '普通',
          value: 5,
          tip: '个'
        }
      ],
      // 饼状图
      cdata: {
        title: '防火墙阻断异常IP进入',
        color:'#4B6EEF',
        data: [
          { value: 320, name: '启用' },
          { value: 23, name: '未启用' }
        ]
      },
      cdata1: {
        title: '终端长期未上线',
        color:'#FA8C16',
        data: [
          { value: 120, name: '启用' },
          { value: 10, name: '未启用' }
        ]
      },
      cdata2: {
        title: '网络中出现异常数据',
        color:'#3ABF81',
        data: [
          { value: 112, name: '启用' },
          { value: 0, name: '未启用' }]
      },
      // 折线图
      lineData: {
        color:'#3B8BFF',
        xAxis:['防火墙阻断异常IP进入', '终端长期未上线', '网络中出现异常数据'],
        value:[150, 230, 224]
      },
      lineData2: {
        color:'#3ABF81',
        xAxis:['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        value:[150, 230, 224, 218, 135, 147, 260]
      },
      importData: 1,
      dataTop5:[
        {title:'获取数据失败',value:62},
        {title:'日期格式转换失败',value:54},
        {title:'字典映射失败',value:32},
        {title:'字段截取失败',value:12},
        {title:'描述信息填充失败',value:5},
      ],
      tableData: [{
        productType: '全部产品',
        value: 20,
        samePeriod: '20%',
        chain: '30%'
      }, {
        productType: '安全登录',
        value: 19,
        samePeriod: '20%',
        chain: '30%'
      }, {
        productType: '主机审计',
        value: 16,
        samePeriod: '20%',
        chain: '30%'
      }, {
        productType: '防火墙',
        value: 22,
        samePeriod: '20%',
        chain: '30%'
      }, {
        productType: '三合一',
        value: 100,
        samePeriod: '20%',
        chain: '30%'
      }, {
        productType: '防病毒',
        value: 30,
        samePeriod: '20%',
        chain: '30%'
      }],
      // 左上角方块数据
      lTop: {
        num: 1234,
      },
    }
  },
  methods: {
    handleCheckWork(index) {
      this.isActive = index
    },
    handleCheckLog(index) {

    },
    handleCheckWeb(index){}
  }
}
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-container {
  width: 100%;
  height:40%;
  min-height:318px;
  border-radius: 4px;
  display: flex;
  //padding: 10px;
  justify-content: space-between;
  align-items: center;

  .data-left {
    width: 49%;
    height: 100%;
    background:#fff;
    border-radius: 4px;
  }

  .data-right {
    width: calc(50% - 10px);
    height: 100%;
    background:#fff;
    border-radius: 4px;
  }

  .data-left .data-top, .data-right .data-top {
    .data-title {
      padding: 10px 20px;
      display: flex;
      align-items: center;

      h3 {
        font-size: 18px;
        margin: 0;
        flex: 1
      }

      .data-tabs {
        display: flex;
        align-items: center;

        .data-tabs-list {
          font-size: 14px;
          padding: 10px 5px;
          margin: 0 5px;
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
      }
    }

    .data-details {
      height:calc(100% - 60px);
      overflow:hidden;
      padding: 10px 20px;
      @include flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .data-count {
        width: 100%;

        .data-count-left, .data-count-right {
          margin-top: 30px;
          float: left;
          width: 50%;
        }

        .data-count-right {
          .data-count-num {
            width: 100%;
            @include flex;
            justify-content: space-around;

            .data-count-num-list {
              width: 44%;
              @include flex;
            }
          }

          .data-count-top {
            margin-top: 20px;
          }
        }
      }
    }
  }
}

.data-detail-box {
  width: 32%;
  padding:20px;
  @include flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  background: #e9edfb;
  border-radius: 4px;

  .data-detail-left {
    @include flex;

    .data-detail-title {
      font-size: 16px;
    }

    .data-detail-img {
      display:flex;
      flex: 1;
      margin-right: 5px;

      img {
        width: 30px;
        height:30px;
      }
    }

  }


}

.data-bottom{
  background:#fff;
  border-radius: 4px;
  height:calc(60% - 20px) !important;
  margin-top:20px;
}
.selected {
  border-bottom: 2px solid #4b6eef !important;
}
.el-table::before{width:338px !important;}

.module-top,
.module-middle {
  height: 27%;
  display: flex;
  flex-direction: column;
}
.left-title{
  margin:0;
  padding:0 10px;
  font-size:20px;
}
</style>
